<template>
   <div class="row"> 
       <el-row :gutter="20">

        <el-col :span="12" :offset="5">
          <div class="title el-icon-s-promotion"> 地产详情</div>
            <el-card>
            <el-row>
            <div class="card">
                  <h4>{{propertyDetail.title}}</h4>
              <div class="box">
                  <div class="left">
                     <!-- <img :src="propertyDetail.image" alt=""> -->
                         <img src="https://img1.baidu.com/it/u=2881144934,4028171016&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" alt="">

                  </div>
                  <div class="right">
                      <div class="top">
                         <img src="https://img1.baidu.com/it/u=1884981823,3554612197&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
                           <img src="https://img1.baidu.com/it/u=1022676937,846988601&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" alt="">
                           <img src="https://img2.baidu.com/it/u=4113231585,1347550672&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333" alt="">
                           <img src="https://img1.baidu.com/it/u=3077914152,2421100358&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" alt="">
                      </div>
                      <span>{{propertyDetail.price}} 元 </span>
                      <div class="footer">
                           <img src="https://img0.baidu.com/it/u=864069255,2673322211&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1049" alt="">
                       <!-- <img :src="propertyDetail.category.image" alt=""> -->

                      </div>
                  </div>
              </div>
              <div class="content">
                 <h4>房源信息</h4>
                  <p>{{propertyDetail.content?propertyDetail.content.replace(/&lt;[^>]+>/g, ''):''}}</p>
              </div>
                 <div class="content">
                 <h4>房源特色</h4>
                 <el-tag v-for="item in tags" :key="item">{{item}}</el-tag>
                  <el-tag type="success">标签二</el-tag>
                  <el-tag type="info">标签三</el-tag>
                  <el-tag type="warning">标签四</el-tag>
                  <el-tag type="danger">标签五</el-tag>
              </div>
            </div>

         </el-row>
            </el-card>

       </el-col>
       </el-row>
    </div>
</template>


<script>
import {getPropertyDetail} from '@/api/property'
export default {
  data(){
    return{
      propertyDetail:{},
      tags:[]
    }
   },
   created(){
       this.getPropertyDetail()
   },
   methods: {
      async getPropertyDetail(){
          const res=await getPropertyDetail(this.$route.query.id)
          this.propertyDetail=res.data
          this.tags=res.data.tags
          console.log(46,  this.propertyDetail);
          console.log(47, res);
       }
   }
}
</script>


<style lang="less" scoped>
.row{
  min-height: 600px;
  margin-bottom: 190px;
}
.card{
  h4{
    font-weight: 700;
  
  }
}
.content{
    margin-top: 30px;
    padding: 20px;
    border-top: 2px solid rgb(238, 231, 231);
    text-indent: 20px;
  
}
     .title{
    color: #eeac68;
    height: 30px;
     line-height: 30px;
  }
  
 /deep/.el-card__body {
     padding-top: 0;
  }

  .box{
    height: 300px;
    display: flex;
    justify-content: space-between;
    // border: 2px solid #e9ebec;
    // padding: 10px;

      .left{
          width: 450px;
          height: 100%;
        //   background: rgb(102, 255, 209);
          
          img{
            height: 100%;
             width: 100%;
          }
      }
      .right{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;
          height: 300px;

           span{
            font-weight: 700;
            font-size: 15px;
            color: #eeac68;
          }

          .top{
          width: 200px;
          height: 150px;
        //   background: #eeac68;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          align-items: center;
          flex-direction: column;

         

          img{
          background: pink;
          width: 80px;
          height: 60px;

          }
          }
         .footer{
          flex: 1;
          height: 100px;
          width: 200px;
        //   background: #6cf;
          img{
          width: 200px;
          height: 100%;
           object-fit: cover;
          }
        }
      }
  }
</style>